<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Todo</title>
    <style>
        #div{
            position: relative;
        }
        .btn{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>待办事项</h4>
        <input type="text" placeholder="请输入待办事项" v-model="todo">
        <button v-on:click="save">保存</button>
        <p>待办</p>
        <ol>
            <!-- v-for从0开始 -->
            <li v-for="(item,index) in elist">
                <span>{{item}}</span> 
                <button @click="did" class="btn">done</button>
            </li>
        </ol>
        <p>已完成</p>
        <ol>
            <li v-for="() in dlist">
                <span>{{}}</span>
            </li>
        </ol>
    </div>
    
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                //事项
                todo: '',
                //待办
                elist: [],
                //已完成
                dlist: []
            },
        methods: { 
            save(){
                if(this.todo){
                    this.elist.push(this.todo);
                    this.todo = '';  
                }  
            },
            did(index){

            } 
        }
    })
    </script>
</body>
</html>